<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="list">
    <div class="box_1">
      <ul @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" ref="box_1">
      <li v-for="(item) in slicedData[currentIndex]" :key="item.id" ref="lis">
        <dl>
          <dt>
            <span
              :class="[
                item.icon,
                {
                  rotate:
                    item.isActive &&
                    ((item.id >= 1 && item.id <= 24) ||
                      item.id === 29 ||
                      item.id === 30),
                },
              ]"
              :style="{ color: item.isActive ? 'chartreuse' : 'red' }"
            ></span>
          </dt>
          <dd :style="{ color: item.isActive ? 'chartreuse' : '#B0B0B0' }">
            {{ item.name }}
          </dd>
        </dl>
      </li>
    </ul>
    </div>
    
    <div class="bottom">
      <dv-border-box12>
        <h3>报警记录</h3>
        <Bottom></Bottom>
      </dv-border-box12>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref } from "vue";
import Bottom from "../Henhouse/Bottom.vue";

interface DataItem {
  id: number;
  name: string;
  icon: string;
  isActive: boolean;
}



const data = ref<DataItem[]>([
  { id: 1, name: "风机1", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 2, name: "风机2", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 3, name: "风机3", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 4, name: "风机4", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 5, name: "风机5", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 6, name: "风机6", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 7, name: "风机7", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 8, name: "风机8", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 9, name: "风机9", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 10, name: "风机10", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 11, name: "风机11", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 12, name: "风机12", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 13, name: "风机13", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 14, name: "风机14", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 15, name: "风机15", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 16, name: "风机16", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 17, name: "风机17", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 18, name: "风机18", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 19, name: "风机19", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 20, name: "风机20", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 21, name: "风机21", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 22, name: "风机22", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 23, name: "风机23", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 24, name: "风机24", icon: "iconfont icon-fengshan1", isActive: false },
  {
    id: 25,
    name: "风窗1",
    icon: "iconfont icon-tongfengchuang",
    isActive: false,
  },
  {
    id: 26,
    name: "风窗2",
    icon: "iconfont icon-tongfengchuang",
    isActive: false,
  },
  {
    id: 27,
    name: "风窗3",
    icon: "iconfont icon-tongfengchuang",
    isActive: false,
  },
  {
    id: 28,
    name: "风窗4",
    icon: "iconfont icon-tongfengchuang",
    isActive: false,
  },
  { id: 29, name: "变频风箱1", icon: "iconfont icon-fengshan1", isActive: false },
  { id: 30, name: "变频风箱2", icon: "iconfont icon-fengshan1", isActive: false },
  {
    id: 31,
    name: "山墙导流板",
    icon: "iconfont icon-shilian",
    isActive: false,
  },
  {
    id: 32,
    name: "左墙导流板",
    icon: "iconfont icon-shilian",
    isActive: false,
  },
  { id: 33, name: "山墙湿帘", icon: "iconfont icon-shilian", isActive: false },
  { id: 34, name: "侧墙湿帘", icon: "iconfont icon-shilian", isActive: false },
  { id: 35, name: "变频加热", icon: "iconfont icon-jiare", isActive: false },
  { id: 36, name: "加热", icon: "iconfont icon-jiare", isActive: false },
  { id: 37, name: "照明", icon: "iconfont icon-zhaoming", isActive: false },
  {
    id: 38,
    name: "喷雾",
    icon: "iconfont icon-icon-shuipenwu",
    isActive: false,
  },
  {
    id: 39,
    name: "时控设备",
    icon: "iconfont icon-fenshikongzhi",
    isActive: false,
  },
  { id: 40, name: "报警设备", icon: "iconfont icon-alarm", isActive: false },
]);

random();
function random() {
  for (let i = 0; i < 20; i++) {
    data.value[parseInt((Math.random() * 24) as any)].isActive = true;
  }
}

// 计算分段数据
const slicedData = computed(() => {
  const chunks = [];
  const chunkSize = 20;
  for (let i = 0; i < data.value.length; i += chunkSize) {
    chunks.push(data.value.slice(i, i + chunkSize));
  }
  return chunks;
});

// 当前显示的数据索引
const currentIndex = ref(0);
let isPaused = false;
let timer: NodeJS.Timeout | null = null;

// 自动轮播间隔时间
const autoPlayInterval = 3000;

// 开始自动轮播
function startAutoPlay() {
  timer = setInterval(() => {
    if (!isPaused) {
      nextChunk();
    }
  }, autoPlayInterval);
}

// 停止自动轮播
function stopAutoPlay() {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
}

// 下一个分段
function nextChunk() {
  currentIndex.value = (currentIndex.value + 1) % slicedData.value.length;
}

// 当鼠标移入时暂停自动轮播
function handleMouseEnter() {
  isPaused = true;
}

// 当鼠标移出时恢复自动轮播
function handleMouseLeave() {
  isPaused = false;
}

// 在组件挂载时开始自动轮播
onMounted(() => {
  startAutoPlay();
});

// 在组件销毁时停止自动轮播
onUnmounted(() => {
  stopAutoPlay();
});

</script>
  
<style scoped lang="less">
.list {
  width: 95%;
  height: 98%;
}

.box_1 {
  width: 100%;
  height: 60%;
  // background: pink;
  // display: flex;
  // justify-content: center;
  // align-items: center;
}

.box_1 ul {
  width: 100%;
  height: 100%;
}

.box_1 ul li {
  width: 15%;
  // height: 8%;
  float: left;
  margin-left: 4%;
  margin-top: 2vh;
  text-align: right;
  padding-right: 2%;
  color: black;
  font-size: calc(100vw * 14 / 1920);
  border-radius: 7px;
}

.box_1 ul li dl {
  width: 100%;
  height: 100%;
}

.box_1 ul li dl dt {
  width: 100%;
  height: 50%;
  text-align: center;
}

.box_1 ul li dl dt span {
  font-size: calc(100vw * 28 / 1920);
}

.box_1 ul li dl dd {
  width: 100%;
  height: 50%;
  font-size: calc(100vw * 10 / 1920);
  text-align: center;
  padding-top: 2vh;
}

.bottom {
  width: 100%;
  height: 38%;
  /* background: pink; */
}

.bottom h3 {
  width: 100%;
  /* text-align: center; */
  padding-left: 2vw;
  padding-top: 1vh;
  color: #2cf6f4;
}

.rotate {
  transform-origin: 50%  50%;
  display: inline-block;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  form {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>